<template>
  <!-- 针对老师 -->
  <div v-if="ruleForm" class="firstTeacher">
    <el-form ref="ruleForm" :rules="rules" class="teaching-form" :model="ruleForm">
      <el-form-item prop="STAGE">
        <el-col :span="20">
          <el-col :span="6">
            <el-select
              v-model="ruleForm.STAGE.cateId"
              style="width: 100%;"
              placeholder="请选择学段"
              :disabled="
                options.STAGE && options.STAGE.length > 0 ? false : true
              "
              @change="lookUpAndDown(ruleForm.STAGE.cateId, 'STAGE')"
            >
              <el-option
                v-for="item in options.STAGE"
                :key="item.cateId"
                :label="item.itemName"
                :value="item.cateId"
              />
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-select
              v-model="ruleForm.SUBJECT.cateId"
              style="width: 100%;"
              placeholder="请选择学科"
              :disabled="
                options.SUBJECT && options.SUBJECT.length > 0 ? false : true
              "
              @change="lookUpAndDown(ruleForm.SUBJECT.cateId, 'SUBJECT')"
            >
              <el-option
                v-for="item in options.SUBJECT"
                :key="item.cateId"
                :label="item.itemName"
                :value="item.cateId"
              />
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-select
              v-model="ruleForm.GRADE.cateId"
              style="width: 100%;"
              placeholder="请选择年级"
              :disabled="
                options.GRADE && options.GRADE.length > 0 ? false : true
              "
              @change="lookUpAndDown(ruleForm.GRADE.cateId, 'GRADE')"
            >
              <el-option
                v-for="item in options.GRADE"
                :key="item.cateId"
                :label="item.itemName"
                :value="item.cateId"
              />
            </el-select>
          </el-col>
        </el-col>
      </el-form-item>

      <el-form-item prop="TEXTBOOK_VERSION">
        <el-col :span="20">
          <el-col :offset="4">
            <div class="title" style="margin-left: 10px;">课题</div>
          </el-col>
        </el-col>
        <el-col :span="20">
          <el-col :span="4">
            <el-select
              v-model="ruleForm.TEXTBOOK_VERSION.cateId"
              style="width: 100%;"
              placeholder="请选择教材版本"
              :disabled="
                options.TEXTBOOK_VERSION && options.TEXTBOOK_VERSION.length > 0
                  ? false
                  : true
              "
              @change="
                lookUpAndDown(
                  ruleForm.TEXTBOOK_VERSION.cateId,
                  'TEXTBOOK_VERSION'
                )
              "
            >
              <el-option
                v-for="item in options.TEXTBOOK_VERSION"
                :key="item.cateId"
                :label="item.itemName"
                :value="item.cateId"
              />
            </el-select>
          </el-col>
          <el-col :span="8">
            <el-select
              v-model="ruleForm.TOPIC"
              style="width: 100%;"
              filterable
              allow-create
              default-first-option
              placeholder="请选择或输入课题"
              :disabled="
                options.TOPIC && options.TOPIC.length > 0 ? false : true
              "
            >
              <el-option
                v-for="item in options.TOPIC"
                :key="item.chapterId"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-col>
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-col :span="20">
          <el-col :span="12">
            <el-button
              type="primary"
              size="medium"
              plain
              style="width: 100%; margin-top: 20px;"
              :disabled="loading"
              @click="next('ruleForm')"
            >下一步</el-button>
          </el-col>
        </el-col>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { findByPCateId, bookChapterList, updateBaseInfo } from '@/api/content';
export default {
  name: 'FirstStudent',
  props: ['list'],
  data () {
    return {
      loading: true,
      bizTypeEnum: 'PREPARELESSON',
      options: {
        GROWTH_CLASSIFY: {
          cateId: '',
          itemCode: '',
          itemName: ''
        },
        STAGE: {
          cateId: '',
          itemCode: '',
          itemName: ''
        },
        SUBJECT: {
          cateId: '',
          itemCode: '',
          itemName: ''
        },
        TEXTBOOK_VERSION: {
          cateId: '',
          itemCode: '',
          itemName: ''
        },
        GRADE: {
          cateId: '',
          itemCode: '',
          itemName: ''
        },
        TOPIC: {
          cateId: '',
          itemCode: '',
          itemName: ''
        }
      },

      ruleForm: {
        GROWTH_CLASSIFY: {
          cateId: '',
          itemCode: '',
          itemName: ''
        },
        STAGE: {
          cateId: '',
          itemCode: '',
          itemName: ''
        },
        SUBJECT: {
          cateId: '',
          itemCode: '',
          itemName: ''
        },
        TEXTBOOK_VERSION: {
          cateId: '',
          itemCode: '',
          itemName: ''
        },
        GRADE: {
          cateId: '',
          itemCode: '',
          itemName: ''
        },
        TOPIC: {
          chapterId: '',
          name: ''
        }
      },
      rules: {
        STAGE: [
          { required: true, message: '请选择教研活动!', trigger: 'change' }
        ]
      }
    };
  },
  computed: {},
  watch: {},
  created () {
    // this.ruleForm.GROWTH_CLASSIFY = {
    //   cateId: '101',
    //   groupEnum: 'GROWTH_CLASSIFY',
    //   itemCode: '10001',
    //   itemName: '学科教学'
    // };
    this.ruleForm = this.list;
    console.log('firstTeacher:', this.ruleForm);
    this.init();
  },
  methods: {
    // 更新数据
    update () {
      if (this.ruleForm.STAGE && this.ruleForm.STAGE.cateId) {
        var STAGE = this.options.STAGE.filter(
          stage => stage.cateId === this.ruleForm.STAGE.cateId
        );
        this.ruleForm.STAGE = STAGE[0];
      }

      if (this.ruleForm.SUBJECT && this.ruleForm.SUBJECT.cateId) {
        var SUBJECT = this.options.SUBJECT.filter(
          subject => subject.cateId === this.ruleForm.SUBJECT.cateId
        );
        this.ruleForm.SUBJECT = SUBJECT[0];
      }

      if (
        this.ruleForm.TEXTBOOK_VERSION &&
        this.ruleForm.TEXTBOOK_VERSION.cateId
      ) {
        var TEXTBOOK_VERSION = this.options.TEXTBOOK_VERSION.filter(
          version => version.cateId === this.ruleForm.TEXTBOOK_VERSION.cateId
        );
        this.ruleForm.TEXTBOOK_VERSION = TEXTBOOK_VERSION[0];
      }
      if (this.ruleForm.GRADE && this.ruleForm.GRADE.cateId) {
        var GRADE = this.options.GRADE.filter(
          grade => grade.cateId === this.ruleForm.GRADE.cateId
        );
        this.ruleForm.GRADE = GRADE[0];
      }
    },

    async init () {
      // 获取学段
      await this.getStage();
    },

    // 获取教学对象
    getCategory () {
      findByPCateId({ bizTypeEnum: this.bizTypeEnum }).then(res => {
        this.options.GROWTH_CLASSIFY = res.data.categoryVoList;
        this.getStage();
      });
    },

    // 获取学段
    getStage () {
      if (
        this.ruleForm.GROWTH_CLASSIFY &&
        this.ruleForm.GROWTH_CLASSIFY.cateId
      ) {
        findByPCateId({
          bizTypeEnum: this.bizTypeEnum,
          pCateId: this.ruleForm.GROWTH_CLASSIFY.cateId
        }).then(res => {
          this.options.STAGE = res.data.categoryVoList;
          this.getSubject();
        });
      } else {
        this.loading = false;
      }
    },

    // 获取学科
    getSubject () {
      if (this.ruleForm.STAGE && this.ruleForm.STAGE.cateId) {
        findByPCateId({
          bizTypeEnum: this.bizTypeEnum,
          pCateId: this.ruleForm.STAGE.cateId
        }).then(res => {
          this.options.SUBJECT = res.data.categoryVoList;
          this.getTextBookVersion();
        });
      } else {
        this.loading = false;
      }
    },

    // 获取教材版本
    getTextBookVersion () {
      if (this.ruleForm.SUBJECT && this.ruleForm.SUBJECT.cateId) {
        findByPCateId({
          bizTypeEnum: this.bizTypeEnum,
          pCateId: this.ruleForm.SUBJECT.cateId
        }).then(res => {
          this.options.TEXTBOOK_VERSION = res.data.categoryVoList;
          this.getGrade();
        });
      } else {
        this.loading = false;
      }
    },

    // 获取年级
    getGrade () {
      if (
        this.ruleForm.TEXTBOOK_VERSION &&
        this.ruleForm.TEXTBOOK_VERSION.cateId
      ) {
        findByPCateId({
          bizTypeEnum: this.bizTypeEnum,
          pCateId: this.ruleForm.TEXTBOOK_VERSION.cateId
        }).then(res => {
          this.options.GRADE = res.data.categoryVoList;
          this.getBookChapterList();
        });
      } else {
        this.loading = false;
      }
    },

    // 章节列表查询 - 课题
    getBookChapterList () {
      bookChapterList({
        stage: this.ruleForm.STAGE.itemCode,
        subject: this.ruleForm.SUBJECT.itemCode,
        vers: this.ruleForm.TEXTBOOK_VERSION.itemCode,
        grade: this.ruleForm.GRADE.itemCode
      }).then(res => {
        this.options.TOPIC = res.data;
        this.loading = false;
        // console.log('this.options.TOPIC:', this.options.TOPIC);
      });
    },

    // 根据上层分类查询下层分类
    lookUpAndDown (id, type) {
      console.log('type:', type);
      findByPCateId({
        bizTypeEnum: this.bizTypeEnum,
        pCateId: id
      }).then(res => {
        var items;
        switch (type) {
          case 'STAGE': // 根据学段获取学科
            this.options.SUBJECT = res.data.categoryVoList;
            break;
          case 'SUBJECT': // 根据学科获取教材版本
            this.options.TEXTBOOK_VERSION = res.data.categoryVoList;
            break;
          case 'TEXTBOOK_VERSION': // 根据教材版本获取年级
            this.options.GRADE = res.data.categoryVoList;
            break;
          case 'GRADE': // 根据教材版本获取课题
            this.getBookChapterList();
            break;
        }
      });
    },

    next (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log('submit!');
          this.update();
          var data = {
            author: this.list.baseInfo.user.name,
            grade: this.list.GRADE.itemCode,
            growthClassify: this.list.GROWTH_CLASSIFY.itemCode,
            id: this.list.baseInfo.id,
            state: this.list.STAGE.itemCode,
            subject: this.list.SUBJECT.itemCode,
            subjectVersion: this.list.TEXTBOOK_VERSION.itemCode,
            title: this.list.TOPIC,
            typeRole: this.list.baseInfo.typeRole
          };
          updateBaseInfo(data).then(res => {
            this.list.step = 'second';
            this.$emit('Callback', this.list);
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped></style>
